<template>
  <div class="maintain-layout">
    <snackbar style-color="#4A4A4A"
              back-color="#FAFAFA"
              status-color="#FAFAFA"
              style="background: #FAFAFA !important"
              rightText="搜索"
              :fixed="true">
      <template slot="slot">
        <div class="top-layout">
          <van-tabs class="tebs-layout" v-model="active" animated color="#28C1C6 " title-active-color="#FF725C "
                    title-inactive-color="#999999" background="#FAFAFA"
                    :ellipsis="false"
                    :line-width="getAdaptiveSize(20)+'px'">
            <van-tab title="时间"></van-tab>
            <van-tab title="金额"></van-tab>
            <van-tab title="盈亏"></van-tab>
          </van-tabs>
        </div>
      </template>
    </snackbar>


    <div class="otherCosts" >
      <div v-for="(item,index) in dataArray" :key="index" class="ot">
        <div class="ot-one">
          <div class="inputData-bodey-nei"><span>碧桂园</span></div>
          <div class="inputData-bodey-xuan"><span>详情<img class="icon-go" src="@/assets/image/icon_right.png"></span>
          </div>
        </div>
        <div class="ot-two">
          <span>中标价</span>
          <span>¥{{ item.price }}</span>
        </div>
        <div class="ot-three">
          <span>总成本</span>
          <span>¥ {{ item.prices }}</span>
          <span>利润</span>
          <span>¥{{ item.profit }}</span>
        </div>
      </div>
    </div>


    <div class="bottom-layout">
      <span class="add-btn">项目情况</span>
      <span class="add-span">|</span>
      <span class="add-span">|</span>
    </div>

  </div>
</template>

<script>
export default {
  name: 'projectManagement',
  data() {
    return {
      active:0,
      dataArray: [
        {
          price: "1,000,000",
          prices: "600,000",
          profit: "600,000"
        },
        {
          price: "1,000,000",
          prices: "600,000",
          profit: "600,000"
        },
        {
          price: "1,000,000",
          prices: "600,000",
          profit: "600,000"
        },
      ],
    }
  }
}
</script>

<style lang="scss" scoped>
.maintain-layout {
  width: 100%;
  height: 100vh;
  background: #F6F6F6;

  .top-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid rgba(219, 219, 219, 0.5);
    width: 100vw;
    background-color: #FAFAFA;

  }

  .otherCosts {
    width: 100%;
    height: 80vh;
    margin-top: 45px;
    overflow: scroll;

    .ot {
      width: 92%;
      height: 22vh;
      background: #FFFFFF;
      box-shadow: 0px 0px 6px 1px rgba(121, 121, 121, 0.3);
      border-radius: 4px;
      border: 0px solid rgba(222, 222, 222, 0.31);
      display: flex;
      flex-direction: column;
      margin: 20px auto;

      .ot-one {
        width: 94%;
        height: 10vh;
        margin-left: 3%;
        display: flex;
        align-items: center;
        position: relative;

        .inputData-bodey-nei {
          width: 30%;
          height: 4vh;
          line-height: 4vh;
          text-align: center;
          background: #65C368;
          color: #FFFFFF;
          border-radius: 2px;
          font-family: "苹方-简 中黑体"
        }

        .inputData-bodey-xuan {
          width: 20%;
          height: 4vh;
          line-height: 4vh;
          text-align: center;
          color: #333333;
          border-radius: 2px;
          position: absolute;
          right: 0;

          span {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        span {
          font-size: 0.4rem;
        }

        .icon-go {
          width: 20px;
          height: 20px;
        }

      }

      .ot-two {
        font-size: 0.4rem;

        span {
          margin-left: 25px;
        }

        span:nth-child(1) {
          color: #B4B4B4;
        }

      }

      .ot-three {
        margin-top: 18px;
        font-size: 0.4rem;

        span {
          margin-left: 25px;
        }

        span:nth-child(1) {
          color: #B4B4B4;
        }

        span:nth-child(3) {
          color: #B4B4B4;
        }

      }
    }


    .other {
      width: 322px;
      height: 17vh;
      background: #FFFFFF;
      box-shadow: 0px 0px 6px 1px rgba(121, 121, 121, 0.3);
      border-radius: 4px;
      border: 0px solid rgba(222, 222, 222, 0.31);
      display: flex;
      flex-direction: column;
      margin: 20px auto;
      color: #B4B4B4;
      font-size: 0.4rem;

      .hengxian {
        width: 94%;
        //margin-right: 14px;
        height: 1px;
        background-color: rgba(201, 201, 201, 0.5);
        margin: 8px auto;
      }

      .details {
        width: 15%;
        height: 3vh;
        line-height: 3vh;
        background: #FFFFFF;
        display: inline-block;
        color: #65C368;
        border-radius: 3px;
        border: 1px solid #65C368;
        text-align: center;
        font-size: 0.4rem;
        margin-left: 80%;
      }

      .other-one {
        width: 94%;
        height: 7vh;

        span {
          line-height: 8vh;
          margin-left: 20px;
        }
      }

      .other-two {
        span:nth-child(1) {
          margin-left: 22px;
          color: #333333;
        }

        span:nth-child(2) {
          margin-left: 10px;
        }

        span:nth-child(3) {
          margin-left: 40px;
        }

        span:nth-child(4) {
          color: #333333;
        }

      }
    }


  }


  .bottom-layout {
    position: fixed;
    bottom: 0px;
    width: 100vw;
    height: 8vh;
    display: flex;
    flex-direction: row;

    span {
      flex: 1;
      height: 8vh;
      background: #FFFFFF;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 0.4rem;
      color: #28C1C6;
    }

    .add-btn {

    }

    .add-span {
      justify-content: left;
    }
  }


}
</style>
